import { useState, useCallback } from "react";
import { Layout, Input, Avatar } from "antd";
import { GithubOutlined, UserOutlined } from "@ant-design/icons";
import { withRouter } from "next/router";
import Link from "next/link";
import Container from "./Container";

const { Header, Content } = Layout;

export default withRouter(({ children, router }) => {
  const [search, setSearch] = useState("");

  const handleChange = (e) =>
    useCallback(() => {
      setSearch(e.target.value);
    }, []);

  const handleSearch = () =>
    useCallback(() => {
      router.push(`/search?query=${search}`);
    }, []);

  return (
    <Layout>
      <Header>
        <Container>
          <div className="header-inner">
            <div className="header-left">
              <Link href="/">
                <GithubOutlined className="icon-github" />
              </Link>
              <Input.Search
                placeholder="搜索仓库"
                value={search}
                onChange={handleChange}
                onSearch={handleSearch}
              />
            </div>
            <div className="header-right">
              <Avatar size={40} icon={<UserOutlined />} />
            </div>
          </div>
        </Container>
      </Header>

      <Content>
        <Container>{children}</Container>
      </Content>

      <style jsx global>
        {`
          #__next {
            height: 100%;
          }

          .ant-layout {
            min-height: 100%;
          }

          .ant-layout-header {
            padding-left: 0;
            padding-right: 0;
          }

          .ant-layout-content {
            background: #fff;
          }
        `}
      </style>
      <style jsx>
        {`
          .header-inner {
            display: flex;
            justify-content: space-between;
          }

          .header-left {
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }

          :global(.icon-github) {
            display: block;
            margin-right: 20px;
            color: #fff;
            font-size: 40px;
          }
        `}
      </style>
    </Layout>
  );
});
